<template>
  <!-- <div class="mouble">
    <div class="mouble-list" @dragstart="dragStart" @dragend="dragEnd">
      <div class="list-item" v-for="(val, key, index) in typeList" draggable :data-type="key" 
      :key="index + 1">
        {{val.name}}
      </div>
    </div>
  </div> -->
  <section class="mouble-left">
    <ul class="mouble-list" @dragstart="dragStart" @dragend="dragEnd">
      <li class="list-item" v-for="(val, key, index) in typeList" draggable :data-type="key" 
      :key="index + 1">
        <!-- <el-button>Default</el-button> -->
        <p>{{val.name}}</p>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  name: 'LeftMouble',
  desc: '左侧拖动模块',
  props: {

  },
  data() {
    return {
      typeList: {
        images: {
          name: '图片',
          icon: 'el-icon-picture',
          // com: Images
        },
        product: {
          name: '商品',
          icon: 'el-icon-s-goods',
          // com: Product
        },
      }

    }
  },
  methods: {
    dragStart(e) {
      console.log("dragStart", e.target)
    },
    dragEnd(e){
      console.log("dragEnd", e.target)
    }
  }
}
</script>


<style scoped lang="scss">
.mouble-left {
  .mouble-list {
    display: flex;
    .list-item {
      padding: 10px 0;
      cursor: pointer;
      list-style: none;
    }
  }
}
</style>
